<template>
  <view class="">
    <navBar :navbarTitle="tabbarTitle" bgColor="" backdrop="10px"></navBar>
    <view class="nav_bg">
      <image :src="`${$api.imgURL}/game_page_bg.png`" mode=""></image>
    </view>
    <view class="list_box">
      <view class="list" v-for="(item, index) in list" :key="index" @click="gotoNav(item)">
        <view class="list_left">
          <image :src="`${$api.imgURL}${item.icon}`" mode="aspectFill"></image>
          <view class="text_view">
            <view>{{ item.name }}</view>
            <view>板块简介居家安全非常重要</view>
          </view>
        </view>
        <view class="">
          <uni-icons type="right" :color="textColor" size="22"></uni-icons>
        </view>
      </view>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import navBar from '@/components/navbar/index.vue'
import { useTabbarStore } from '@/store'
const tabbarStore = useTabbarStore()
export default {
  components: {
    navBar
  },
  data() {
    return {
      list: [
        {
          name: '居家安全',
          icon: '/game1_icon.png'
        },
        {
          name: '社会安全',
          icon: '/game2_icon.png'
        },
        {
          name: '消防安全',
          icon: '/game3_icon.png'
        },
        {
          name: '交通安全',
          icon: '/game4_icon.png'
        },
        {
          name: '自然安全',
          icon: '/game5_icon.png'
        },
        {
          name: '生产安全',
          icon: '/game6_icon.png'
        },
        {
          name: '应急救护安全',
          icon: '/game7_icon.png'
        }
      ],
      tabbarTitle: tabbarStore.activeTabName
    }
  },
  onLoad(options) {
    if (options.functionName) {
      this.tabbarTitle = options.functionName
    }
  },
  methods: {
    gotoNav() {
      uni.navigateTo({
        url: '/pages/gamePage/gameDetail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list_box {
  width: 702rpx;
  margin: 0 auto;
  margin-top: 40rpx;
  position: relative;
  z-index: 1;

  .list {
    box-sizing: border-box;
    padding: 30rpx 32rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(251, 194, 45, 0.09);
    border-radius: 24rpx;
    align-items: center;
    margin-bottom: 24rpx;
  }

  .list_left {
    display: flex;

    image {
      width: 86rpx;
      height: 108rpx;
    }

    .text_view {
      margin-left: 20rpx;

      :nth-child(1) {
        font-size: 36rpx;
        color: #2c2e3d;
      }

      :nth-child(2) {
        font-size: 24rpx;
        color: #464646;
      }
    }
  }
}

.nav_bg {
  width: 100%;
  height: 370rpx;
  position: fixed;
  top: 0;
  z-index: 0;
  image {
    width: 100%;
    height: 1208rpx;
  }
}
</style>
